<template>
<div>
    <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" >
              <div class="text">异常数目</div>
              <div class="wgt_number unpost">{{unnormalnum}}</div>
         </el-card>
        </el-col>
      </el-row>
      <UnhealthList :tableData="showPage"/>
      <div class="block" style="margin:30px 30px 30px 30px;">
          <el-pagination
           @current-change="handlePageChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="this.tableData.length/pageSize+1">
          </el-pagination>
      </div>
</div>
</template>
<script>
import UnhealthList from './UnhealthList.vue'
import axios from 'axios'
export default {
  components: { UnhealthList },
  name: 'Unhealth',
  data () {
    return {
      unnormalnum: 0,
      currentPage: 1,
      totalItem: 0,
      pageSize: 2,
      showPage: [],
      allPages: []
    }
  },
  methods: {
    getUnNormalTemperatureList () {
      axios({
        withCredentials: true,
        maxRedirects: 0,
        method: 'get',
        url: '/admin/getUnNormalTemperatureList',
        timeout: 4000
      }).then((res) => {
        console.log(res)
        this.unnormalnum = res.data.length
        this.tableData = res.data
        this.pageslice()
      }, ErrorEvent => {
        this.$message('请求数据失败')
      })
    },
    handlePageChange (val) {
      this.currentPage = val
      this.showPage = this.allPages[this.currentPage - 1]
    },
    pageslice () {
      this.totalItem = this.tableData.length
      let wholeTable = this.tableData
      this.allPages = []
      for (let i = 0; i < wholeTable.length; i += this.pageSize) {
        this.allPages.push(wholeTable.slice(i, i + this.pageSize))
      }
      if (this.allPages.length > 0) {
        this.showPage = this.allPages[0]
      } else {
        this.showPage = []
      }
    }
  },
  created () {
    this.getUnNormalTemperatureList()
  },
  component: {
    UnhealthList
  }
}
</script>
<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
.wgt_number{
    display: block;
    font-size: 190%;
    font-style: normal;
    font-weight: bold;
    padding-bottom: 3px;
}
 .unpost{
   color: crimson;
 }
 .post{
   color:limegreen;
 }
 .text{
     font-size: 120%;
     padding-bottom: 10px;
 }
</style>
